<template>
  <div id="data-view">
    <dv-full-screen-container>
      <div class="main-header">
        <div class="mh-middle">
          <dv-decoration-11 style="width:500px;height:70px;">
            <h3 style="color: #34a3f8">机器人控制系统</h3>
          </dv-decoration-11>

          <div class="tech-button" @click="uploadAction">
            上传动作
          </div>
          <input
            type="file"
            accept=".json"
            ref="openFile"
            style="display: none"
            @change="handleUploadAction"
          />
        </div>
      </div>

      <dv-border-box-1 class="main-container">
        <dv-border-box-3 class="left-chart-container">

          <Left-Chart-1/>
          <Left-Chart-2/>
          <Left-Chart-3/>

        </dv-border-box-3>

        <div class="right-main-container">
          <div class="rmc-top-container">
            <dv-border-box-3 class="rmctc-left-container">

              <Center-Cmp/>

            </dv-border-box-3>

            <div class="rmctc-right-container">
              <dv-border-box-3 class="rmctc-chart-1">

                <!--                <Right-Chart-1 />-->
                <div style="margin: 20px" v-show="!isConnect">
                  网络扫描中……
                </div>

                <div style="margin: 20px" v-show="isConnect">
                  连接完成
                </div>

                <dv-decoration-12 style="width:150px;height:150px;margin: auto auto;"/>

              </dv-border-box-3>

              <dv-border-box-4 class="rmctc-chart-2" :reverse="true">

                <Right-Chart-2/>

              </dv-border-box-4>
            </div>
          </div>

          <dv-border-box-4 class="rmc-bottom-container">

            <Bottom-Charts/>

          </dv-border-box-4>
        </div>
      </dv-border-box-1>

    </dv-full-screen-container>
  </div>
</template>

<script>
import LeftChart1 from './LeftChart1'
import LeftChart2 from './LeftChart2'
import LeftChart3 from './LeftChart3'

import CenterCmp from './CenterCmp'

import RightChart2 from './RightChart2'

import BottomCharts from './BottomCharts'

let websockets = []
export default {
  name: 'DataView',
  components: {
    LeftChart1,
    LeftChart2,
    LeftChart3,
    CenterCmp,
    RightChart2,
    BottomCharts
  },
  data () {
    return {
      actionData: [],
      isConnect: false
    }
  },
  mounted () {
    async function connect () {
      let i = 0
      const maxAttempts = 255
      const success = []

      const fetchPromises = []

      for (; i < maxAttempts; i++) {
        (function (i) {
          const fetchPromise = fetch(`http://192.168.3.${i}:18286`, { method: 'GET', mode: 'no-cors' })
            .then((res) => {
              success.push(i)
            })
            .catch((error) => {
            })

          fetchPromises.push(fetchPromise)
        })(i)
      }

      // 使用Promise.all等待所有请求完成
      await Promise.all(fetchPromises)

      for (i = 0; i < success.length; i++) {
        console.log('success', success[i])
        const websocket = new WebSocket(`ws://192.168.3.${success[i]}:18286`)
        websockets.push(websocket)
      }
    }

    connect().then(() => {
      if (websockets.length > 0) {
        this.isConnect = true
        console.log('websockets', websockets)
      }
    })
  },
  methods: {
    // 动作上传
    uploadAction () {
      this.$refs.openFile.click()
    },
    handleUploadAction () {
      const file = event.target.files[0]

      if (file) {
        const reader = new FileReader()

        reader.onload = (e) => {
          this.actionData = JSON.parse(e.target.result)
          for (let i = 0; i < websockets.length; i++) {
            websockets[i].send(JSON.stringify({
              'data': this.actionData
            }))
          }
        }

        reader.readAsText(file)
        this.$refs.openFile.value = ''
      }
    }
  }
}
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);

      a:visited {
        color: rgb(1, 134, 187);
      }
    }

    .mh-middle {
      font-size: 30px;
    }

    .mh-left, .mh-right {
      width: 450px;
    }
  }

  .main-container {
    height: calc(~"100% - 80px");

    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-chart-container {
    width: 22%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }

  .right-main-container {
    width: 78%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .rmc-top-container {
    height: 65%;
    display: flex;
  }

  .rmctc-left-container {
    width: 65%;
  }

  .rmctc-right-container {
    width: 35%;
  }

  .rmc-bottom-container {
    height: 35%;
  }

  .rmctc-chart-1, .rmctc-chart-2 {
    height: 50%;
  }
}
</style>

<style>
.tech-button {
  position: fixed;
  top: 20px;
  right: 10px;
  background: linear-gradient(to bottom, #293E6A, #162A47);
  color: #34a3f8;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
}
</style>
